{% extends "basic.html" %} {%block body%}

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
    th.des:after {
        content: "\21E9";
    }
    
    th.aes:after {
        content: "\21E7";
    }
</style>
<div id="page-wrapper">

    <div class="container-fluid">

        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Tables
                </h1>
                <ol class="breadcrumb">
                    <li>
                        <i class="fa fa-dashboard"></i> <a href="index.html">Dashboard</a>
                    </li>
                    <li class="active">
                        <i class="fa fa-table"></i> Tables
                    </li>
                </ol>
            </div>
        </div>
        <!-- /.row -->

        <!--filter form-->
        <div class="row">
            <div class="col-lg-8">
                <form id="convFilter" class="form-horizontal" method="post" action="/filter_table">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="keywords">LinkRef</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="LinkRef" id="LinkRef" placeholder="e.g. AL100">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="dialogAct">DataQuality</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="DataQuality" id="DataQuality" placeholder="e.g. 1">
                            </div>
                        </div>
                        <!--<div class="form-group">
                            <label class="col-sm-4 control-label" for="slot">AverageSpeed</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="AverageSpeed" id="AverageSpeed" placeholder="e.g. >127.5">
                            </div>
                        </div>-->
                    </div>
                    <div class="col-md-6">
                        <div class="form-group ">
                            <label class="col-sm-4 control-label" for="fromDate">From</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="fromDate" id="fromDate" placeholder="e.g. 01/25/15">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="toDate">To</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="toDate" id="toDate" placeholder="e.g. 02/25/15">
                            </div>
                        </div>
                        <div class="col-sm-offset-4 col-sm-8">
                            <!--<button type="button" id="find-all" class="btn btn-primary">Find All</button>-->
                            <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
        <!--end filter form-->

        <div class="row">
            <!--<div class="col-lg-12">
                <h2>Bordered Table</h2>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>Page</th>
                                <th>Visits</th>
                                <th>% New Visits</th>
                                <th>Revenue</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>-->
            <div class="col-lg-12">
                <h2>Traffic Data Table</h2>
                <div class="table-responsive" id="datatable" style="overflow:auto;height:500px;">
                    <!--<table class="table table-bordered table-hover table-striped">
                        <thead>
                            <tr>
                                <th>Page</th>
                                <th>Visits</th>
                                <th>% New Visits</th>
                                <th>Revenue</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>-->
                    <!--</table>-->
                </div>
            </div>
        </div>
        <!-- /.row -->

        <!--<div class="row">
            <div class="col-lg-6">
                <h2>Basic Table</h2>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Page</th>
                                <th>Visits</th>
                                <th>% New Visits</th>
                                <th>Revenue</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-lg-6">
                <h2>Striped Rows</h2>
                <div class="table-responsive">
                    <table class="table table-hover table-striped">
                        <thead>
                            <tr>
                                <th>Page</th>
                                <th>Visits</th>
                                <th>% New Visits</th>
                                <th>Revenue</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>-->
        <!-- /.row -->

        <!--<div class="row">
            <div class="col-lg-6">
                <h2>Contextual Classes</h2>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover table-striped">
                        <thead>
                            <tr>
                                <th>Page</th>
                                <th>Visits</th>
                                <th>% New Visits</th>
                                <th>Revenue</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>

        </div>-->
        <!-- /.row -->

    </div>
    <!-- /.container-fluid -->

</div>
<!-- /#page-wrapper -->
<script type="text/javascript">
    var filter = {{filter|tojson}};
    filter = JSON.parse(filter);
        var tabulate = function(data, columns) {
            var table = d3.select('#datatable').append('table').attr("class", "table table-bordered table-hover table-striped");
            var thead = table.append('thead');
            var tbody = table.append('tbody');
            // var sortAscending = true;
            thead.append('tr')
                .selectAll('th')
                .data(columns)
                .enter()
                .append('th')
                .text(function(d) {
                    return d
                });
            // .on('click', function(d) {
            //     thead.attr('class', 'header');
            //     if (sortAscending) {
            //         rows.sort(function(a, b) {
            //             return b[d] < a[d];
            //         });
            //         sortAscending = false;
            //         this.className = 'aes';
            //     } else {
            //         rows.sort(function(a, b) {
            //             return b[d] > a[d];
            //         });
            //         sortAscending = true;
            //         this.className = 'des';
            //     }
            // });
            var rows = tbody.selectAll('tr')
                .data(data)
                .enter()
                .append('tr');

            var cells = rows.selectAll('td')
                .data(function(row) {
                    return columns.map(function(column) {
                        return {
                            column: column,
                            value: row[column]
                        }
                    })
                })
                .enter()
                .append('td')
                .text(function(d) {
                    return d.value
                });

            return table;
        }

    d3.csv('./static/MAR15.csv', function(data) {
        var columns = ["LinkRef", "LinkDescription", "Date", "TimePeriod", "AverageJT", "AverageSpeed", "DataQuality", "LinkLength", "Flow"];
        if (filter['LinkRef']){
            data = data.filter(function(row) {
                return row['LinkRef'] == filter['LinkRef'];
             })
        };

        if (filter['DataQuality']){
            data = data.filter(function(row) {
                return row['DataQuality'] == filter['DataQuality'];
             })
        }; 

        if (filter['toDate']){
            data = data.filter(function(row) {
                return row['Date'] < filter['toDate'];
             })
        };
        
        if (filter['fromDate']){
            data = data.filter(function(row) {
                return row['Date'] > filter['fromDate'];
             })
        };
        tabulate(data, columns)
    })
</script>
{%endblock%}